<template>
	<view>
		<view v-if="ismode" @click="tapmode" class="posifi width100vw height100vh zindex5">
			
		</view>
		<view class="flex-ju-b size34 color666 pt20 border-tECEDEE bgfff">
			
			<view @click="tapci(0)" class="flex-ju-c flex1  flex-col" :class="{active:tindex==0}">
				单词
					<view class="wh32-12 ra4  mt8">
						<image v-if="tindex==0" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
					</view>
				</view>
				<view @click="tapci(1)" class="flex-ju-c flex1  flex-col" :class="{active:tindex==1}">词根
				<view class="wh32-12 ra4  mt8">
					<image v-if="tindex==1" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
				</view>
			</view>
			
		</view>
		<view class="con pb200">
			<nodata v-if="isdata"></nodata>
			<view @click="tapdanci(item)" v-for="(item,index) in list" :key="index" class="flex-a-i bgfff ra30 pg30 border-bECEDEE pb30 mt20">
				<image mode="widthFix" :src="tindex?'/static/cigens.png':'/static/dancien.png'" class="width96 image mr15"></image>
				<view class="flex1">
					<view class="flex-ju-b ">
						<view class="flex-a-i bold">
							{{item.favoriteFolderName}}
							<view v-if="item.isDefault" class="bgF3F5F7 color999 ra10 pg2-10 size22 ml10">默认</view>
						</view>
					  <view  class="size35  ">
						  <view class="posire ">
							  <image @click.stop="tapmove(item)" mode="widthFix" src="/static/dian.png" class="width50 posire image "></image>
						  </view>
						  <view v-if="item.isseeting" class="wh172-215 posiab bgfff right30 ra20 size28 center zindex155" style="box-shadow: 0rpx 3rpx 20rpx 0rpx rgba(0,0,0,0.1608);">
							  <view @click.stop="tapDefault(item)" class="height70 flex-a-i ml30">设为默认</view>
							  <view @click.stop="tapsetname(item)" class="height70 flex-a-i ml30">重命名</view>
							  <view @click.stop="folderrdelete(item)" class="height70 flex-a-i ml30">删除</view>
						  </view>
					  </view>
					</view>
					<view class="flex-ju-b mt20">
						<view class=" size24 color999">共{{item.count}}词</view>
						<view class="size24 colorFD2F55 ra10 pg7-20" style="background: rgba(253,47,85,0.08);">
							查看词本
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-ju-c ">
			
		<view class="posifi width1000 bottom0 bgfff pg30 zindex5" :style="{paddingBottom:bhh+'px'}" style="box-shadow: 0rpx -4rpx 30rpx 0rpx rgba(0,0,0,0.1);border-radius: 50rpx 50rpx 0rpx 0rpx;">
			<view @click="$refs.addcigen.openc()" class="flex-ju-c colorfff height100 ra20 bgFD3C60">新建词本</view>
		</view>
		</view>
		
		<add @collection="collection" :type="tindex+1" ref="addcigen"></add>
		<uni-popup ref="updel" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0">
			<view :style="{paddingBottom:bhh+'px'}">
				<view class="size24 color666 pt50" >
					<view class="flex-ju-c">确认删除"{{item.favoriteFolderName}}"？ </view>
					<view class="flex-ju-c">单词本内单词及词根将一并删除</view>
				</view>
				<view @click="tapdel" class="colorFD2F55 size28 border-tECEDEE flex-ju-c mt50 pt30">
					删除
				</view>
				<view @click="$refs.updel.close()" class="color666 size28 border-tECEDEE flex-ju-c mt30 pt30 mb50">
					取消
				</view>
			</view>
			
		</uni-popup>
		<uni-popup ref="upname" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0">
			<view class="con pt40 " :style="{paddingBottom:bhh+'px'}">
				<view class="flex-ju-b">
					<view class="size36 bold">
						修改名称
					</view>
					<view @click="$refs.upname.close()">
						<uni-icons type="closeempty" size="20"></uni-icons>
					</view>
				</view>
				<view class="size28 flex-a-i  pb30 mt30">
					词本名称：
					<view class="flex-a-i height100 pl20 pr20 ra20 bgF9F9F9">
						<input class="flex1" placeholder-style="color:#898D92;font-size:28rpx;" maxlength="10" v-model="favoriteName" placeholder="词本名称不多于10个字" />
						<view class="color666 size28">{{favoriteName.length}}/10</view>
					</view>
				</view>
				<view @click="setname" class="flex-ju-c colorfff bg000 height100 ra20">确认</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="host">
			<view class="wh640-352 bgfff ra20 size32 posire">
				<view class="height240 flex-ju-c flex-col">
					<view class="  color222 bold">确认删除词本？</view>
					<view class="color666 mt20">单词本内单词及词根将一并删除</view>
				</view>
				
				<view class="flex-ju-b posiab width1000 bottom0 bold border-tD8D8D8 height112">
					<view @click="$refs.host.close()" class="flex1 flex-ju-c mr2">取消</view>
					<view @click="tapdel" class="flex1 height112 flex-ju-c colorFD2F55"  style="border-left:1px solid #D8D8D8;">删除</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isdata:false,
				favoriteName:"",
				ismode:false,
				tindex:0,
				list:[],
				item:{},
				setdata:false,
			}
		},
		mounted() {
		},
		onShow() {
			if(this.setdata){
				this.getdata()
			}
		},
		onLoad() {
			this.getdata()
		},
		methods: {
			collection(type){
				if(type == (this.tindex+1)&&type==1){
					this.getdata(1)
				}
				if(type == (this.tindex+1)&&type==2){
					this.getdata(2)
				}
			},
			setname(){
				this.http('/api/favorite_folder/update',{
					favoriteId:this.item.id,
					favoriteName:this.favoriteName
				},'put').then(res=>{
					this.$refs.upname.close()
					this.toast('修改成功')
					setTimeout(()=>{
						this.getdata(this.tindex+1)
					},700)
				})
			},
			tapsetname(item){
				this.item=item
				this.favoriteName=item.favoriteFolderName
				 this.$refs.upname.open()
				 this.tapmode()
			},
			tapdel(){
				this.http('/api/favorite_folder/delete?favoriteFolderId='+this.item.id,{},'delete').then(res=>{
					 this.$refs.host.close()
					this.toast('删除成功')
					setTimeout(()=>{
						this.getdata()
					},700)
				})
			},
			folderrdelete(item){
				this.item = item
				
				// uni.showModal({
				// 	title:"确认删除词本？",
				// 	content:'单词本内单词及词根将一并删除',
				// 	confirmColor:"#FD2F55",
				// 	cancelColor:"#222",
				// 	confirmText:"删除",
				// 	success:(res)=> {
				// 		if(res.confirm){
				// 			this.tapdel()	
				// 		}
				// 	}
				// })
				
				  this.$refs.host.open()
				 this.tapmode()
			},
			tapDefault(item){
				this.http('/api/favorite_folder/update?favoriteFolderId='+item.id,{
					favoriteId:item.id,
					isDefault:1
				},'put').then(res=>{
					item.isseeting=0
					this.toast('设置成功')
					setTimeout(()=>{
						this.getdata()
					},700)
				})
			},
			tapmode(){
				this.ismode = false
				this.item.isseeting=0
			},
			tapmove(item){
				this.item=item
				item.isseeting=1
				this.ismode = true
			},
			getdata(dictionaryType){
				this.http('/api/favorite_folder/page',{
					dictionaryType:this.tindex+1
				},'post').then(res=>{
					this.list=res.data
					this.nodata(this.list,this)
				})
			},
			tapci(index){
				this.tindex = index
				this.getdata()
			},
			tapdanci(item){
				
				this.navto('default_word?type='+this.tindex+'&name='+item.favoriteFolderName+'&id='+item.id)
			}
		}
	}
</script>

<style>
	page{
		background: #F3F5F7;
	}
.active{
	color:#222;
	font-weight: 600;
}
</style>
